<template>
	<div :class="['mine']">
		<div class="reservation-box">
			<div class="reservation-box-2">
				<div class="reservation-main">
					<div class="reservation-content" style="color: #fff">
						<div class="reservation-content-label" style="color: #fff">排行</div>
						<div>宗族名称</div>
						<div class="reservation-content-label" style="color: #fff">人数</div>
					</div>
				</div>
			</div>
			<div class="reservation-box-3">
				<div v-for="(item, index) in list1" :key="index" class="reservation-main">
					<div class="reservation-content">
						<div class="reservation-content-label">{{ index + 1 }}</div>
						<div>{{ item.name }}</div>
						<div class="reservation-content-label">{{ item.num }}</div>
					</div>
				
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { getClanRankListApi } from '@/apis'
	import { showDialog, showConfirmDialog, showLoadingToast, closeToast, showSuccessToast, showFailToast, showToast } from 'vant'
    import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount, readonly, onBeforeUnmount } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const route = useRoute()
    const router = useRouter()

	const show: Ref<boolean> = ref(false)
	const list1: Ref<any[]> = ref([
		// {
		// 	name: '陈氏宗族',
		// 	num: 10000
		// },
		// {
		// 	name: '周氏宗族',
		// 	num: 100
		// },
		// {
		// 	name: '欧阳氏宗族',
		// 	num: 1
		// },
	])
	onBeforeMount(() => {
		getClanRankListApi({
			company: '连云港人文纪念园智慧陵园管理系统',
			dw: '连云港人文纪念园',
		}).then(res => {
			list1.value = res.data
		}).catch(err => {
			showDialog({
				title: '提示',
				message: '网络异常，请稍后重试！',
			})
		})
	})
</script>

<style lang="scss" scoped>
    .mine {
        width: 100vw;
        height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
    }
	.reservation-box {
		flex: 1;
		width:100%;
		// height: 350px;
		// height: 310px;
		overflow: hidden;
		box-sizing: border-box;
		@include padding-global;
		background: url(@/assets/relativeGraph/top.png);
		background-size: 100% 100%;
	}
	.reservation-box-2 {
		margin-top: 220px;
		background-color: rgb(206, 109, 109);
	}
	.reservation-box-3 {
		height: 280px;
		overflow: scroll;
		box-sizing: border-box;
		// margin-top: 220px
	}
	.reservation-main {
		@include padding-global;
		border-radius: 5px;
		margin: 5px 0;
		// background-color: $bg-color-global;
		border-bottom: 1px solid #000;
	}
	.wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
	.emptyContent {
		font-size: $font-1-size;
		text-align:center;
		color: $font-color-2-global;
		padding-top:80px;
	}
    // 列表内容
    .reservation-content{
		display: flex;
		align-items: center;
		color: $font-color-global;
		padding: 5px 0;
        text-align: left;
		justify-content: space-between;
	}
	.reservation-content-label{
		width: 10vw;
		color: $font-color-3-global;
		text-align: center;
	}
	.search {
		width: 100%;
		padding: 15px;
		@include padding-global;
		:deep(.van-search__label), :deep(.van-search__action), :deep(.van-field__control) {
			font-size: $font-1-size;;
		}
		:deep(.van-search__action) {
			@include button-bg-global;
			color: #fff;
		}
	}
</style>
